<template class="big">
	<scroll-view style=" height: 100vh" @scrolltolower="lowerBottom" scroll-y="true" refresher-enabled="true"
		:refresher-triggered="triggered" @refresherrefresh="onRestore">
		<Swiper></Swiper>
		<Tag></Tag>
		<view class="cu-item">
			<view class="action" style="display: flex;justify-content: flex-end;padding-right: 3vw;">
				<switch class="switch-sex" @change="SwitchSex" :class="skin ? 'checked' : 'right'"
					:checked="skin ? true : false">
				</switch>
			</view>
		</view>
		<view v-if="skin == true">
			<van-empty description="暂无帖子" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
				v-if="list.length == 0" />
			<div class="mesList" v-for="(item, index) in list" :key="item.userid" v-else>
				<div class="mes-card" @click="showdetail(item.mesid)">
					<div class="card-top">
						<div
							style="display: flex;width:100%; align-items: center;justify-content: end;padding-right: 10px;padding-left: 10px;">
							<div class="tags">
								<view style="margin-left: 10px;" class="cu-tag round bg-orange light ">{{ item.types }}
								</view>
							</div>

						</div>
					</div>
					<div style="padding-left: 5px;padding-right: 5px;" class="card-body px-2">
						<van-image v-if="item.imgList[0]" width="100%" height="15rem" fit="cover" position="center"
							:src='item.imgList[0]' />
						<div style="font-size: 20px; color: #212121; font-weight: 600; padding-top: {{item.imgList[0] ? '20px' : '0px'}};" class="title">
						  {{ item.title }}
						</div>

						<view style="padding-top: 10px;" class="content">
							{{ item.content }}
						</view>
					</div>

					<div class="card-bottom">
						<div style="display: flex; align-items: center; padding-right: 10px;" class="user-info">
							<van-image round width="2rem" height="2rem" :src='item.img' />
							<span style="margin-left: 5px;">{{ item.Username }}</span>
						</div>
						<view style="color: #9a9a9a;" class="time">
							{{ item.time.substring(0, 10) }}
						</view>
					</div>
				</div>
			</div>
		</view>
		<view v-else>
			<van-empty description="暂无帖子" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
				v-if="rec_list.length == 0" />
			<div class="mesList" v-for="(item, index) in rec_list" :key="item.userid" v-else>
				<div class="mes-card" @click="showdetail(item.mesid)">
					<div class="card-top">
						<div
							style="display: flex;width:100%; align-items: center;justify-content: end;padding-right: 10px;padding-left: 10px;">
							<div class="tags">
								<view style="margin-left: 10px;" class="cu-tag round bg-orange light ">{{ item.types }}
								</view>
							</div>
			
						</div>
					</div>
					<div style="padding-left: 5px;padding-right: 5px;" class="card-body px-2">
						<van-image v-if="item.imgList[0]" width="100%" height="15rem" fit="cover" position="center"
							:src='item.imgList[0]' />
						<div style="font-size: 20px; color: #212121; font-weight: 600; padding-top: {{item.imgList[0] ? '20px' : '0px'}};" class="title">
						  {{ item.title }}
						</div>
			
						<view style="padding-top: 10px;" class="content">
							{{ item.content }}
						</view>
					</div>
			
					<div class="card-bottom">
						<div style="display: flex; align-items: center; padding-right: 10px;" class="user-info">
							<van-image round width="2rem" height="2rem" :src='item.img' />
							<span style="margin-left: 5px;">{{ item.Username }}</span>
						</div>
						<view style="color: #9a9a9a;" class="time">
							{{ item.time.substring(0, 10) }}
						</view>
					</div>
				</div>
			</div>
		</view>
	</scroll-view>

</template>
<script>
	import Swiper from "@/modul/Home/Swiper.vue"
	import Tag from "@/modul/Home/Tag.vue"
	import {
		showAllpost,
		getreclist
	} from '@/store/api.js'
	import {
		truncateString
	} from '@/store/constants.js'
	export default {
		onPageScroll({
			scrollTop
		}) {
			console.log('监听页面滚动');

			if (scrollTop === 0) console.log('页面触顶');
		},
		components: {
			Swiper,
			Tag
		},
		name: 'meslist',
		data() {
			return {
				triggered: false,
				rec_list: [],
				total: 0,
				list: [],
				page: 1,
				skin: true,
				count: 1
			}
		},
		mounted() {
			let data = {
				pageNum: this.page,
				pageSize: 20
			}
			getreclist(this.count).then(res => {
				console.log('看！！！')
				console.log(res)
				this.count = this.count + 20
				res.data.data.forEach(item => {
					let types = ''
					item.tags.forEach(it => {
						types = types + '#' + it.name
					})
					this.rec_list.push({
						img: item.posterAvatar,
						title: item.title,
						content: truncateString(item.content),
						userid: item.posterId,
						mesid: item.id,
						time: item.beginTime,
						types: types,
						imgList: this.processString(item.content).images.slice(0, 3)
					})
				})
			}).catch(err => {
				console.log(err)
			})
			showAllpost(data).then((res) => {
				this.page++
				console.log(res)
				this.total = res.data.data.total
				res.data.data.rows.forEach(item => {
					let types = ''
					item.tags.forEach(it => {
						types = types + '#' + it.name
					})
					this.list.push({
						img: item.posterAvatar,
						title: item.title,
						content: truncateString(item.content),
						userid: item.posterId,
						mesid: item.id,
						time: item.beginTime,
						types: types,
						imgList: this.processString(item.content).images.slice(0, 3)
					})
				})
			})
		},
		methods: {
			onRestore() {
				console.log('onRestore')
				uni.$emit('flushed', true)
				this.triggered = false
				this.rec_list = []
				this.total = 0
				this.list = []
				this.page = 1
				this.skin = true
				this.count = 1
				this.triggered = true
				let data = {
					pageNum: this.page,
					pageSize: 20
				}
				getreclist(this.count).then(res => {
					console.log('看！！！')
					console.log(res)
					this.count = this.count + 20
					res.data.data.forEach(item => {
						let types = ''
						item.tags.forEach(it => {
							types = types + '#' + it.name
						})
						this.rec_list.push({
							img: item.posterAvatar,
							Username: item.posterUsername,
							title: item.title,
							content: truncateString(item.content),
							userid: item.posterId,
							mesid: item.id,
							time: item.beginTime,
							types: types,
							imgList: this.processString(item.content).images.slice(0, 3)
						})
					})
				}).catch(err => {
					console.log(err)
				})
				showAllpost(data).then((res) => {
					this.page++
					console.log(res)
					this.total = res.data.data.total
					res.data.data.rows.forEach(item => {
						let types = ''
						item.tags.forEach(it => {
							types = types + '#' + it.name
						})
						this.list.push({
							img: item.posterAvatar,
							title: item.title,
							Username: item.posterUsername,
							content: truncateString(item.content),
							userid: item.posterId,
							mesid: item.id,
							time: item.beginTime,
							types: types,
							imgList: this.processString(item.content).images.slice(0, 3)
						})
					})
				})
				setTimeout(() => {
					console.log('刷新完成')
					this.triggered = false
				}, 1000)
			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},
			processString(inputString) {
				const parts = inputString.split('**/img/**');

				// 获取文本部分和图片 URL 部分
				const textPart = parts[0];
				const imageUrls = parts[1] ? parts[1].split(',') : [];

				// 将图片 URL 部分存储为数组
				const imagesArray = imageUrls.map(url => url.trim());
				//获取评分栏
				const part2 = textPart.trim().split('**/rank/**')
				let newtext = part2[0]
				// let rankpart=part2[1]?JSON.parse(part2[1]):''
				// console.log(part2[1])
				// console.log(part2[0])
				// 返回处理后的结果，图片部分作为数组返回
				return {
					// rank:rankpart,//评分部分
					text: newtext.trim(), // 去除文本部分两端的空格
					images: imagesArray // 图片 URL 部分作为数组返回
				};

			},
			lowerBottom() {
				console.log('下拉刷新')
				console.log(this.skin)
				if (this.skin == true) {
					if (this.total > this.list.length) {
						let data = {
							pageNum: this.page,
							pageSize: 20
						}
						console.log(data)
						showAllpost(data).then((res) => {
							this.page++
							console.log(res)
							res.data.data.rows.forEach(item => {
								let types = ''
								item.tags.forEach(it => {
									types = types + '#' + it.name
								})
								this.list.push({
									img: item.posterAvatar,
									title: item.title,
									content: truncateString(item.content),
									userid: item.posterId,
									mesid: item.id,
									time: item.beginTime,
									types: types,
									imgList: this.processString(item.content).images.slice(0, 3)
								})
							})
						})
					} else {
						uni.showToast({
							title: '没有更多了',
							icon: "none",
							duration: 1000
						})
					}
				} else {
					getreclist(this.count).then(res => {
						console.log('看！！！')
						console.log(res)
						if (res.data.data == []) {
							uni.showToast({
								title: '没有更多了',
								icon: "none",
								duration: 1000
							})
							return
						}
						this.count = this.count + 20
						res.data.data.forEach(item => {
							let types = ''
							item.tags.forEach(it => {
								types = types + '#' + it.name
							})
							this.rec_list.push({
								img: item.posterAvatar,
								title: item.title,
								content: truncateString(item.content),
								userid: item.posterId,
								mesid: item.id,
								time: item.beginTime,
								types: types,
								imgList: this.processString(item.content).images.slice(0, 3)
							})
						})
					}).catch(err => {
						console.log(err)
					})
				}
			},
			showdetail(mesid) {
				uni.navigateTo({
					url: `/subpkg/mes_detail/mes_detail?id=${mesid}`
				})
			}
		}
	}
</script>
<style scoped lang="less">
	.card-top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-top: 10px;
		padding-bottom: 10px;

	}

	.mes-card {
		overflow: hidden;
		position: relative;
		text-align: left;
		border-radius: 0.5rem;
		background-color: #fff;
		width: 100%;
		box-shadow: 7px 7px 14px #d0d0d0,
			-7px -7px 14px #f0f0f0;
	}

	.card-bottom {
		padding: 10px;
		align-items: center;


		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.time {}

	.mesList {
		padding: 10px;
		padding-left: 5px;
		padding-right: 10px;
		display: flex;

		justify-content: center;
	}

	.right {
		color: aqua;
	}

	.switch-sex::after {
		content: "全部";
		font-size: 10px;
		/* 设置内容的大小 */
		color: blue;
		/* 设置内容的颜色 */
	}

	.switch-sex::before {
		content: "推荐";
		font-size: 10px;
		/* 设置内容的大小 */
		color: blue;
		/* 设置内容的颜色 */
	}

	.showImg {
		margin-top: 2vh;
		max-width: 25vw;
		// height: 20vw;
		// max-height: auto;
		margin-right: 1vh;
		margin-bottom: 2vh;
	}

	.timeAndType {
		display: flex;
		font-size: 10px;
		justify-content: flex-end;
		align-items: center;
		margin-right: 2vw;
	}

	.time {
		margin-right: 4vw;
	}

	.meslist {
		position: relative;
		z-index: 1;
		// margin-block-start: 20rpx;
		padding: 18rpx;
	}

	/* 单个卡片 */
	.mes {
		padding-bottom: 5px;
		z-index: 5;
		display: flex;
		margin-top: 2rpx;
		border-radius: 10rpx;
		padding-top: 2vh;
		box-shadow: 3px 3px 5px 3px #888888;
		background-color: #fefefe;
		margin-left: 5rpx;
		margin-right: 5rpx;
	}

	.headimg {
		width: 225rpx;
		height: 100rpx;
		border-radius: 75%;
		margin-left: 15rpx;
	}

	.content {
		width: 580rpx;
		font-size: 25rpx;
		-webkit-line-clamp: 2;
		margin-left: 15rpx;
	}

	.title {
		font-weight: 700;
		font-size: 30rpx;
		margin-left: 15rpx;
	}

	.bg {
		width: 100%;
		height: 74%;
		z-index: 0;
		position: absolute;
	}
</style>